<template>
    <div>
        <div class="tree-bar aside white-block tree">
            <scroll-bar ref="treeBar" class="treeBar" :wrapStyle.sync="sidebarStyle">
                <el-tree :data="data1" :props="defaultProps" :load="loadNode" :lazy="true" @node-click="checkChange"
                         @node-expand="checkChange1($event,'treeBar')" @node-collapse="checkChange1($event,'treeBar')"
                         :current-node-key="1"
                         :expand-on-click-node="false"
                         :default-expanded-keys="[1]" :highlight-current="true" node-key="id" ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                        <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                        <span class="el-tree-node__label">{{ data.name }}</span>
                        <span
                            class="el-tree-node__label">{{ data.haschildren == 0 ? '' : ' (' + data.count + ') ' }}</span>
                    </span>
                </el-tree>
            </scroll-bar>
        </div>
        <div class="main">
            <div class="content-top white-block" v-if="messageTable">
                <div class="current">
                    <span class="span">系统名：</span>
                    <el-tag v-if="atomicName">{{atomicName}}</el-tag>
                    <span class="code span">系统编码:</span>
                    <span class="num" v-if="code"><b>{{code}}</b></span>
                    <el-button type="primary" class="details" @click="details">详情</el-button>
                </div>
            </div>
            <div class="message white-block mt10" v-if="messageTable">
                <div class="toolbar">
                    <div class="provider">
                        <el-select v-model="value" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="input" placeholder="请输入" class="input mr10"
                                  @keyup.enter="getPage(1)"></el-input>
                        <el-button type="primary" @click="getPage(1)">查询</el-button>
                    </div>
                    <div class="text-right">
                        <el-button type="primary" @click="visible1 = true">新建</el-button>
                    </div>
                </div>
                <div class="table atomicTable">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :highLight="true"
                                   v-loading="loading"
                                   @tabCurrentChange="tabCurrentChangeModify"
                                   @row-click="handleClick"
                                   highlight-current-row
                                   class="mt20">
                        <template slot="adapterType" slot-scope="scope">
                            <span v-if="scope.row.adapterType == 1">HTTP</span>
                            <span v-if="scope.row.adapterType == 2">SOAP</span>
                            <span v-if="scope.row.adapterType == 3">WEBSERVICE</span>
                            <span v-if="scope.row.adapterType == 4">H5</span>
                            <span v-if="scope.row.adapterType == 5">微信小程序</span>
                        </template>
                        <template slot="status" slot-scope="scope">
                            <span v-if="scope.row.status == 1">在用</span>
                            <span v-if="scope.row.status == 0">注销</span>
                        </template>
                        <template slot="contentType" slot-scope="scope">
                            <span v-if="scope.row.contentType == 1">multipart/form-data</span>
                            <span v-if="scope.row.contentType == 2">application/json</span>
                            <span v-if="scope.row.contentType == 3">application/x-www-form-urlencoded</span>
                            <span v-if="scope.row.contentType == 4">text/xml</span>
                            <span v-if="scope.row.contentType == 5">application/xml</span>
                        </template>
                    </table-example>
                    <page :data="page" v-if="page" class="mt20 page" @jumpPage="getPage"></page>
                </div>
            </div>
            <el-drawer
                :visible.sync="deployment"
                direction="rtl"
                :show-close="false"
                size="70%"
            >
                <el-container>
                    <el-header :height="'auto'">
                        <div class="box-head">
                            <!--                        <breadcrumb :title="'原子服务名称'">-->
                            <div class="sername">
                                原子服务名称
                            </div>
                            <div class="text-right operation">
                                <el-button type="primary" @click="update = true">编辑</el-button>
                                <el-button @click="del">删除</el-button>
                                <el-button @click="directoryMigration = true">服务发布</el-button>
                                <span class="close" @click="atomicClose"><i class="el-icon-close"></i></span>
                            </div>
                            <!--                        </breadcrumb>-->
                            <span>{{name}}</span>
                            <div class="detailsMsg bgc">
                                <el-row>
                                    <el-col :span="4">
                                        <span>原子服务名称：</span>
                                        <p :title="tableMsg.atomserviceName">
                                            {{tableMsg.atomserviceName}}
                                        </p>
                                    </el-col>
                                    <el-col :span="4">
                                        <span>原子服务编码：</span>
                                        <p :title="tableMsg.atomserviceCode">
                                            {{tableMsg.atomserviceCode}}
                                        </p>
                                    </el-col>
                                    <el-col :span="2">
                                        <span>版本：</span>
                                        <p :title="tableMsg.atomserviceVersione">
                                            {{tableMsg.atomserviceVersion}}
                                        </p>
                                    </el-col>
                                    <el-col :span="2">
                                        <span>适配类型：</span>
                                        <p v-if="tableMsg.adapterType == 1">HTTP</p>
                                        <p v-if="tableMsg.adapterType == 2">SOAP</p>
                                        <p v-if="tableMsg.adapterType == 3">WEBSERVICE</p>
                                        <p v-if="tableMsg.adapterType == 4">H5</p>
                                        <p v-if="tableMsg.adapterType == 5">微信小程序</p>
                                    </el-col>
                                    <el-col :span="4">
                                        <span>请求头类型：</span>
                                        <p v-if="tableMsg.contentType == 1">multipart/form-data</p>
                                        <p v-if="tableMsg.contentType == 2">application/json</p>
                                        <p v-if="tableMsg.contentType== 3"
                                           :title="'application/x-www-form-urlencoded'">
                                            application/x-www-form-urlencoded</p>
                                        <p v-if="tableMsg.contentType == 4">text/xml</p>
                                        <p v-if="tableMsg.contentType == 5">application/xml</p>
                                    </el-col>
                                    <el-col :span="3">
                                        <span>最大连接数：</span>
                                        <p>
                                            {{tableMsg.maxClients}}
                                        </p>
                                    </el-col>
                                    <el-col :span="3">
                                        <span>超时时间(ms)：</span>
                                        <p>
                                            {{tableMsg.overTime}}
                                        </p>
                                    </el-col>
                                    <el-col :span="2">
                                        <span>状态：</span>
                                        <p v-if="tableMsg.status == 1">在用</p>
                                        <p v-if="tableMsg.status == 0">注销</p>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-header>
                    <el-main class="tabBox">
                        <div class="white-block">
                            <el-tabs v-model="activeName" @tab-click="tabClick" class="heightTabs">
                                <el-tab-pane label="部署信息" name="first" class="tabsHeight">
                                    <div class="tab-content">
                                        <div class="current provider mapOutMsg">
                                            <div class="toolbar">
                                                <breadcrumb :title="'部署信息'" class="breadcrumb1">
                                                    <div class="text-right">
                                                        <!--                                    <span>部署信息</span>-->
                                                        <el-link type="primary" :underline="false" @click="saveMap">
                                                            保存部署信息
                                                        </el-link>
                                                    </div>
                                                </breadcrumb>
                                            </div>
                                        </div>
                                        <div class="map-out-msg">
                                            <ul>
                                                <li v-for="item in mapList" :key="item.id">
                                                    <div class="img">
                                                        <el-image :src="item.deploySrc"></el-image>
                                                    </div>
                                                    <el-checkbox v-model="item.checked" class="checked"
                                                                 v-if="item.appStatus === '1'">
                                                        {{item.app}}
                                                    </el-checkbox>
                                                    <el-checkbox v-model="item.checked" class="checked" disabled
                                                                 v-else>
                                                        {{item.app}}
                                                    </el-checkbox>
                                                </li>
                                            </ul>
                                            <!--                                <div class="seve">-->
                                            <!--                                    <el-button type="primary" @click="saveMap">保存部署信息</el-button>-->
                                            <!--                                </div>-->

                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="适配类型信息" name="second" class="tabsHeight">
                                    <div class="tab-content">
                                        <div class="current provider mapOutMsg">
                                            <div class="toolbar">
                                                <breadcrumb :title="'适配类型信息'" class="breadcrumb1">
                                                    <div class="text-right">
                                                        <el-link type="primary" :underline="false"
                                                                 @click="adaptationUpD">编辑
                                                        </el-link>
                                                    </div>
                                                </breadcrumb>
                                            </div>
                                        </div>
                                        <div class="adaptation-msg ml20">
                                            <el-row type="flex" class="row-bg" justify="space-between">
                                                <el-col :span="12" class="sysMsg">
                                                    <div class="grid-content bg-purple">
                                                        <span class="sysTitle">目标地址：</span>
                                                        <div class="sysContenrt">
                                                            {{adaptation.serviceUrl}}
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="12" class="sysMsg">
                                                    <div class="grid-content bg-purple">
                                                        <span class="sysTitle">发送字符编码：</span>
                                                        <div class="sysContenrt">{{adaptation.scharset}}</div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            <el-row type="flex" class="row-bg" justify="space-between">
                                                <el-col :span="12" class="sysMsg">
                                                    <div class="grid-content bg-purple">
                                                        <span class="sysTitle">接收字符编码：</span>
                                                        <div class="sysContenrt">{{adaptation.rcharset}}</div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="12" class="sysMsg" v-if="requestGenre">
                                                    <div class="grid-content bg-purple">
                                                        <span class="sysTitle">请求类型：</span>
                                                        <!--                                                <div class="sysContenrt" v-if="requestCategoryVal==''"></div>-->
                                                        <div class="sysContenrt" v-if="request==1">GET</div>
                                                        <div class="sysContenrt" v-if="request==2">POST</div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="关联服务" name="third" class="tabsHeight">
                                    <div class="tab-content">
                                        <div class="current provider adaptation">
                                            <div class="toolbar">
                                                <breadcrumb :title="'关联服务'" class="breadcrumb1"></breadcrumb>
                                            </div>
                                        </div>
                                        <div class="relatedservices">
                                            <table-example :data="tableData1" :tableColumn="adapterHeader"
                                                           :slotColumns="relatedSlotColumns"
                                                           :highLight="true"
                                                           @tabCurrentChange="tabCurrentChangeDetails"
                                                           class="mt10">
                                                <template slot="status" slot-scope="scope">
                                                    <span v-if="scope.row.status == 1">在用</span>
                                                    <span v-if="scope.row.status == 0">注销</span>
                                                </template>
                                                <template slot="operation" slot-scope="scope">
                                                    <!--                            <el-link type="primary" :underline="false" class="mr10" @click="visible2 = true">迁移-->
                                                    <!--                            </el-link>-->
                                                    <el-link type="primary" :underline="false" class="mr10"
                                                             @click="serDetails(scope.row)">
                                                        编辑
                                                    </el-link>

                                                </template>
                                            </table-example>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>

                    </el-main>

                    <!--                <el-button :type="mapOutbtn" @click="mapOut">部署信息</el-button>-->
                    <!--                <el-button :type="adaptationbtn" @click="adaptation">适配类型信息-->
                    <!--                </el-button>-->
                    <!--                <el-button :type="relatedServicesbtn" @click="relatedServices">关联服务-->
                    <!--                </el-button>-->
                    <!--                <el-button :type="servicePubbtn" @click="servicePub">服务发布-->
                    <!--                </el-button>-->
                </el-container>
            </el-drawer>
            <!--  系统详情-->
            <div class="white-block system-details" v-if="detailsSystem">
                <breadcrumb :title="'提供者系统信息'">
                    <el-button type="primary" @click="detailsSysDet">编辑</el-button>
                    <el-button @click="closeDetails">返回</el-button>
                </breadcrumb>
                <div class="sysDet">
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">系统名称：</span>
                                <span class="sysContenrt">{{proSysFormData.systemName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">系统编码：</span>
                                <span class="sysContenrt">{{proSysFormData.systemCode}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">管理部门：</span>
                                <span class="sysContenrt">{{proSysFormData.manageName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">联系人：</span>
                                <span class="sysContenrt">{{proSysFormData.pname}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">联系方式：</span>
                                <span class="sysContenrt">{{proSysFormData.pphone}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" style="margin-left: 1rem">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle"></span>
                                <span class="sysContenrt"></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <!--  新建系统弹框-->
        <dialog-msk :show.sync="visible1" ref="dialog1" :center="true" :width="'7rem'" :title="'新建原子服务'"
                    :noEsc="false"
                    :noModal="false"
                    class="atomic"
                    @save="addSystem"
                    @cancel="closeSys">
            <div class="fromBox">
                <el-form ref="form" :model="form" :rules="rules" label-width="130px">
                    <el-form-item label="原子服务名称" prop="atomserviceName">
                        <el-input v-model="form.atomserviceName" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="原子服务编码" prop="atomserviceCode">
                        <el-input v-model="form.atomserviceCode" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="版本" prop="atomserviceVersion">
                        <el-input v-model="form.atomserviceVersion" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="适配类型">
                        <!--                        <el-input v-model="form.edition" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestType"
                                :key="item.requestVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="请求头类型">
                        <!--                        <el-input v-model="form.contentType" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestHeadeVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestHeader"
                                :key="item.requestHeadeVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="最大连接数" prop="maxClients">
                        <el-input v-model="form.maxClients" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="超时时间(ms)" prop="overTime">
                        <el-input v-model="form.overTime" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <!--                        <el-input v-model="form.status" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestStatusVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestStatus"
                                :key="item.requestStatusVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!--  修改-->
        <dialog-msk :show.sync="update" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑原子服务'"
                    @save="saveUpdate"
                    :noEsc="false"
                    :noModal="false"
                    class="atomic"
                    @cancel="closeUpdate">
            <div class="fromBox">
                <el-form ref="updateForm" :model="updateForm" :rules="updateRules"
                         label-width="130px">
                    <el-form-item label="原子服务名称" prop="atomserviceName">
                        <el-input v-model="updateForm.atomserviceName" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="原子服务编码" prop="atomserviceCode">
                        <el-input v-model="updateForm.atomserviceCode" placeholder="请输入" :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item label="版本" prop="atomserviceVersion">
                        <el-input v-model="updateForm.atomserviceVersion" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="适配类型">
                        <!--                        <el-input v-model="form.edition" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestType"
                                :key="item.requestVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="请求头类型">
                        <!--                        <el-input v-model="form.contentType" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestHeadeVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestHeader"
                                :key="item.requestHeadeVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="最大连接数" prop="maxClients">
                        <el-input v-model="updateForm.maxClients" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="超时时间(ms)" prop="overTime">
                        <el-input v-model="updateForm.overTime" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <!--                        <el-input v-model="form.status" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestStatusVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestStatus"
                                :key="item.requestStatusVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!--  修改适配类型信息-->
        <dialog-msk :show.sync="adaptationFlag" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑适配类型信息'"
                    :noEsc="false"
                    :noModal="false"
                    @save="saveAdaptation"
                    @cancel="closeadaptation">
            <div>
                <el-form ref="adaptationForm" :model="adaptationForm" :rules="sdapRules"
                         label-width="110px">
                    <el-form-item label="目标地址" prop="serviceUrl">
                        <el-input v-model="adaptationForm.serviceUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="发送字符编码" prop="scharset">
                        <el-input v-model="adaptationForm.scharset"></el-input>
                    </el-form-item>
                    <el-form-item label="接收字符编码" prop="rcharset">
                        <el-input v-model="adaptationForm.rcharset"></el-input>
                    </el-form-item>
                    <el-form-item label="请求类型" v-if="requestGenre">
                        <el-select v-model="requestCategoryVal" placeholder="请选择"
                                   class="select mr10">
                            <el-option
                                v-for="item in requestCategory"
                                :key="item.requestCategoryVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

        <!--  详情-->
        <dialog-msk :show.sync="detailsSys" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑关联服务信息'"
                    @save="updateDetailsSer" @cancel="closeUpdateDetailsSer" :noEsc="false" :noModal="false">
            <div>
                <el-form ref="detailsSer" :model="detailsSer" :rules="detailsRules" label-width="120px">
                    <el-form-item label="服务名称" prop="servname">
                        <el-input v-model="detailsSer.servname"></el-input>
                    </el-form-item>
                    <el-form-item label="服务编码">
                        <el-input v-model="detailsSer.servcode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="版本" prop="servversion">
                        <el-input v-model="detailsSer.servversion"></el-input>
                    </el-form-item>
                    <el-form-item label="超时时间(ms)" prop="overTime">
                        <el-input v-model="detailsSer.overTime"></el-input>
                    </el-form-item>
                    <el-form-item label="工作状态">
                        <!--                        <el-input v-model="detailsSer.status"></el-input>-->
                        <el-select v-model="detailsSerVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in detailsSeropt"
                                :key="item.detailsSerVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

        <!--  详情系统详情-->
        <dialog-msk :show.sync="detailsSysFlag" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑'"
                    @save="updateDetailsSys" @cancel="closeUpdateDetailsSys" :noEsc="false" :noModal="false">
            <div>
                <el-form ref="proSysForm" :model="proSysForm" :rules="sysMsgRules" label-width="110px">
                    <el-form-item label="系统名称" prop="systemName">
                        <el-input v-model="proSysForm.systemName"></el-input>
                    </el-form-item>
                    <el-form-item label="系统编码">
                        <el-input v-model="proSysForm.systemCode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="管理部门" prop="manageName">
                        <el-input v-model="proSysForm.manageName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="pname">
                        <el-input v-model="proSysForm.pname"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="pphone">
                        <el-input v-model="proSysForm.pphone"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <!--                        <el-input v-model="proSysForm.status"></el-input>-->
                        <el-select v-model="detailsStatus" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in detailsStaOpt"
                                :key="item.detailsStatus"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

        <!-- 发布选择树-->
        <dialog-msk :show.sync="directoryMigration" ref="dialog" :center="true" :title="'选择目录'" :noEsc="false"
                    :noModal="false">
            <span slot="footer" class="dialog-footer">
                <span slot="footer">
                    <el-button @click="closePub">取消</el-button>
                    <el-button type="primary" @click="next">下一步</el-button>
                </span>
            </span>
            <div class="tree1 treeBar">
                <el-tree :data="pubTreeData" :props="defaultProps" :load="loadNode2" :lazy="true"
                         :expand-on-click-node="false"
                         @node-click="checkChange2"
                         @node-expand="checkChange1" @node-collapse="checkChange1" :default-expanded-keys="[1]"
                         :highlight-current="true" node-key="id" ref="tree1">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                 <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                                 <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                                 <span class="el-tree-node__label">{{ data.name }}</span>
                            </span>
                </el-tree>
            </div>
        </dialog-msk>
        <!-- 发布  -->
        <dialog-msk :show.sync="directoryFrom" ref="dialog" :center="true" :title="'服务发布'" :noEsc="false"
                    :noModal="false">
            <span slot="footer" class="dialog-footer">
                <span slot="footer">
                   <el-button type="" @click="pro">上一步</el-button>
                    <el-button type="primary" @click="publish">发布</el-button>
                </span>
            </span>
            <div>
                <el-form ref="servicePubMsg1" :model="servicePubMsg1" :rules="serviceRules"
                         label-width="120px"
                         class="mt30">
                    <el-form-item label="服务名称" prop="name">
                        <el-input v-model="servicePubMsg1.name" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="服务编码" prop="code">
                        <el-input v-model="servicePubMsg1.code" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="服务版本" prop="edition">
                        <el-input v-model="servicePubMsg1.edition" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="超时时间(ms)" prop="time">
                        <el-input v-model="servicePubMsg1.time" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="工作状态">
                        <!--                            <el-input v-model="servicePubMsg1.status" placeholder="请输入"></el-input>-->
                        <el-select v-model="requestStaVal" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in requestSta"
                                :key="item.requestStaVal"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import scrollBar from '@/components/scrollbar'
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            let patter = /^[0-9a-zA-Z.]+$/,
                code = (rule, value, callback) => {
                    if (!patter.test(value)) {
                        return callback(new Error('只能出现"."或者数字或者字母'))
                    } else {
                        callback()
                    }
                },
                num = /^[0-9]*$/,
                number = (rule, value, callback) => {
                    if (!num.test(value)) {
                        return callback(new Error('只能出现数字'))
                    } else {
                        callback()
                    }
                },
                num1 = /^[0-9-]*$/,
                number1 = (rule, value, callback) => {
                    if (value && !num1.test(value)) {
                        return callback(new Error('只能出现数字或者"-"'))
                    } else {
                        callback()
                    }
                },
                num2 = /^[0-9.]*$/,
                number2 = (rule, value, callback) => {
                    if (!num2.test(value)) {
                        return callback(new Error('只能出现数字或者"."'))
                    } else {
                        callback()
                    }
                },
                url = /(http|https):\/\/([\w.]+\/?)\S*/,
                serviceUrl = (rule, value, callback) => {
                    if (value && !url.test(value)) {
                        return callback(new Error('请输入正确的目标地址'))
                    } else {
                        callback()
                    }
                },
                coding = /^([\x01-\x7f]|[\xc0-\xdf][\x80-\xbf]|[\xe0-\xef][\x80-\xbf]{2}|[\xf0-\xf7][\x80-\xbf]{3}|[\xf8-\xfb][\x80-\xbf]{4}|[\xfc-\xfd][\x80-\xbf]{5})+$/,
                Coding = (rule, value, callback) => {
                    if (value && !coding.test(value)) {
                        return callback(new Error('只能出现编码格式'))
                    } else {
                        callback()
                    }
                }
            return {
                name: '',
                loading: false,
                activeName: 'first',
                sidebarStyle: null,
                checked: true,
                pubTreeData: null,
                input: '',
                value: '1',
                flag: true, // 部署信息
                adapterMsg: false, // 适配类型信息
                associatedSer: false,
                deployment: false, // 展示部署信息tab栏
                messageTable: false, // 显示当前目录与系统表格
                detailsSystem: false, // 是否显示系统详情
                update: false,
                servicePubMsg: false,
                currentPage: 1,
                servicePubMsg1: {
                    id: '',
                    name: '',
                    code: '',
                    edition: '',
                    status: '',
                    time: ''
                }, // 发布服务
                form: {
                    atomserviceName: '',
                    atomserviceCode: '',
                    maxClients: '1000',
                    atomserviceVersion: '1.0',
                    contentType: '',
                    overTime: '30000'
                },
                updateForm: {},
                detailsStaOpt: [{
                    value: '0',
                    label: '注销'
                }, {
                    value: '1',
                    label: '在用'
                }],
                detailsStatus: '',
                rules: {
                    atomserviceName: [
                        {required: true, message: '请输入原子服务名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    atomserviceCode: [
                        {required: true, message: '请输入原子服务编码', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
                        {validator: code}
                    ],
                    maxClients: [
                        {required: true, message: '请输入最大连接数', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ],
                    atomserviceVersion: [
                        {required: true, message: '请输入原子服务版本', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number2}
                    ],
                    overTime: [
                        {required: true, message: '请输入超时时间', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                sysMsgRules: {
                    systemName: [
                        {required: true, message: '请输入系统名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    pname: [
                        {required: false, message: '请输入联系人', trigger: 'blur'},
                        {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
                    ],
                    pphone: [
                        {required: false, validator: number1, trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'}
                    ],
                    manageName: [
                        {required: true, message: '管理部门不能为空', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ]
                },
                updateRules: {
                    atomserviceName: [
                        {required: true, message: '原子服务名称不能为空', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    maxClients: [
                        {required: true, message: '最大连接数不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ],
                    atomserviceVersion: [
                        {required: true, message: '原子服务版本不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number2}
                    ],
                    overTime: [
                        {required: true, message: '超时时间不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                sdapRules: {
                    serviceUrl: [
                        {required: false, message: '请输入目标地址', trigger: 'blur'},
                        {validator: serviceUrl}
                    ],
                    scharset: [
                        {required: false, message: '请输入发送字符编码', trigger: 'blur'},
                        {validator: Coding}
                    ],
                    rcharset: [
                        {required: false, message: '请输入接收字符编码', trigger: 'blur'},
                        {validator: Coding}
                    ]
                },
                tree: true,
                serviceRules: {
                    name: [
                        {required: true, message: '请输入服务名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入服务编码', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
                        {validator: code}
                    ],
                    edition: [
                        {required: true, message: '请输入服务版本', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number2}
                    ],
                    time: [
                        {required: true, message: '请输入超时时间', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                detailsRules: {
                    servname: [
                        {required: true, message: '请输入服务名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    servversion: [
                        {required: true, message: '请输入服务版本', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number2}
                    ],
                    overTime: [
                        {required: true, message: '请输入超时时间', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                }, // 详情
                proSysForm: {},
                detailsSer: {},
                adaptationForm: {
                    serviceUrl: '',
                    scharset: 'UTF-8',
                    rcharset: 'UTF-8'
                }, // 适配类型信息
                adaptation: {},
                detailsSeropt: [
                    {
                        value: '0',
                        label: '注销'
                    }, {
                        value: '1',
                        label: '在用'
                    }
                ], // 工作状态
                detailsSerVal: '1',
                options: [{
                    value: '1',
                    label: '原子服务名称'
                }, {
                    value: '2',
                    label: '原子服务编码'
                }],
                requestType: [
                    {
                        value: '1',
                        label: 'HTTP'
                    },
                    {
                        value: '2',
                        label: 'SOAP'
                    },
                    {
                        value: '3',
                        label: 'WEBSERVICE'
                    },
                    {
                        value: '4',
                        label: 'H5'
                    },
                    {
                        value: '5',
                        label: '微信小程序'
                    }
                ], // 适配类型
                requestVal: '1',
                requestStatus: [
                    {
                        value: '1',
                        label: '在用'
                    },
                    {
                        value: '0',
                        label: '注销'
                    }
                ], // 状态
                requestStatusVal: '1',
                requestSta: [
                    {
                        value: '1',
                        label: '在用'
                    },
                    {
                        value: '0',
                        label: '注销'
                    }
                ],
                requestStaVal: '1',
                requestHeader: [
                    {
                        value: '1',
                        label: 'multipart/form-data'
                    },
                    {
                        value: '2',
                        label: 'application/json'
                    },
                    {
                        value: '3',
                        label: 'application/x-www-form-urlencoded'
                    },
                    {
                        value: '4',
                        label: 'text/xml'
                    },
                    {
                        value: '5',
                        label: 'application/xml'
                    }
                ], // 请求头
                requestHeadeVal: '1',
                requestCategory: [
                    {
                        value: '2',
                        label: 'POST'
                    },
                    {
                        value: '1',
                        label: 'GET'
                    }
                ], // 请求类型
                requestCategoryVal: '', // 请求类型下拉选项
                request: '',
                tableData: [],
                header: [
                    {
                        prop: 'atomserviceName',
                        label: '原子服务名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomserviceCode',
                        label: '原子服务编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomserviceVersion',
                        label: '版本',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left'
                    },
                    {
                        prop: 'adapterType',
                        label: '适配类型',
                        minWidth: 70,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'contentType',
                        label: '请求头类型',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'maxClients',
                        label: '最大连接数',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'overTime',
                        label: '超时时间(ms)',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                tableData1: [],
                adapterHeader: [
                    {
                        prop: 'servname',
                        label: '服务名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servcode',
                        label: '服务编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servversion',
                        label: '版本',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'overTime',
                        label: '超时时间(ms)',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomcode',
                        label: '原子服务编码',
                        width: 120,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 120,
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                slotColumns: ['adapterType', 'contentType', 'status'],
                relatedSlotColumns: ['operation', 'status'],
                multipleSelection: [],
                data1: null,
                nodeData: null,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: function (data, node) {
                        if (!data.haschildren) return true
                    }
                },
                currentTree: null,
                // visible2: false,
                directoryMigration: false, // 目录迁移
                detailsSys: false,
                highlightCurrent: false,
                defaultExpandAll: false,
                page: null,
                index: 1,
                visible1: false, // 新建
                code: null,
                detailsId: null,
                atomcode: null,
                systemId: null,
                adapterType: null,
                mapList: [], // 部署信息
                currentRow: null,
                serviceid: null,
                mapOutbtn: 'primary',
                adaptationbtn: 'info',
                relatedServicesbtn: 'info',
                servicePubbtn: 'info',
                atomicName: null,
                currentRowModify: null,
                currentRowDetails: null,
                requestGenre: false,
                requestShow: '',
                addIp: '',
                id: '',
                tableAtomcode: '',
                tabName: '',
                tableMsg: [],
                headerMsg: [
                    {
                        prop: 'atomserviceName',
                        label: '原子服务名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomserviceCode',
                        label: '原子服务编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomserviceVersion',
                        label: '版本',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left'
                    },
                    {
                        prop: 'adapterType',
                        label: '适配类型',
                        minWidth: 70,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'contentType',
                        label: '请求头类型',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'maxClients',
                        label: '最大连接数',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'overTime',
                        label: '超时时间(ms)',
                        minWidth: 120,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                adaptationFlag: false,
                directoryFrom: false,
                detailsSysFlag: false,
                proSysFormData: {},
                ropeId: ''
            }
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.getPage(1)
                }
            }
        },
        mounted() {
            let _this = this
            // 左侧树滚动条样式初始赋值
            this.sidebarStyle = this.$method.getScrollbarStyle()
            // 添加左侧树滚动条对象
            this.$method.addScrollbar(_this)
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.id !== '') {
                this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                    id: this.id,
                    current: this.index || 1,
                    size: 10
                }).then(result => {
                    if (result.success) {
                        this.messageTable = true
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })

                this.$http.get('/esbAtomServiceDetailed/detailSystemMess', {
                    id: this.id
                }).then(result => {
                    this.atomicName = result.data.systemName
                    this.code = result.data.systemCode
                    this.detailsStatus = result.data.status
                    this.proSysForm = result.data
                    this.proSysFormData = result.data
                })
            }
        },
        methods: {
            // 获取表格数据

            // 目录树
            loadNode(node, resolve) {
                this.node_had = node
                this.resolve_had = resolve
                this.$http.get('/esbProviderTree/listMessage', {
                    id: node.data ? node.data.id : '' || 0
                }).then(result => {
                    this.data = result.data
                    let _this = this, arr = [], catalogueData = [], nodesData = []
                    setTimeout(() => {
                        _this.$method.updateView(false, false, _this, _this.$refs.treeBar)
                    }, 500)
                    for (let i = 0; i < result.data.length; i++) {
                        if (result.data[i].haschildren === 1) {
                            catalogueData.push(result.data[i])
                        } else {
                            nodesData.push(result.data[i])
                        }
                    }
                    arr = [...nodesData, ...catalogueData]
                    return resolve(arr)
                })
            },

            // 目录迁移树
            loadNode2(node, resolve) {
                this.$http.get('/EsbServiceTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data
                    return resolve(result.data)
                })
            },

            // 目录迁移
            save1() {
                this.directoryMigration = false
            },

            // 点击详情
            details() {
                this.detailsSystem = true
                this.messageTable = false
                this.deployment = false
            },

            // 点击下一步
            next() {
                if (this.currentTree1 === undefined) {
                    this.$alert('请选择目录', '提示', {
                        confirmButtonText: '确定'
                    })
                } else {
                    this.servicePubMsg = true
                    this.directoryMigration = false
                    this.tree = false
                    this.directoryFrom = true
                }

            },

            // 点击下一步
            pro() {
                this.directoryMigration = true
                this.directoryFrom = false
            },
            // 查询
            query() {
                this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                    id: this.currentTree.data.code || this.id,
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value

                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            // 发布
            publish() {
                this.validate('servicePubMsg1', () => {
                    this.$http.get('/EsbServiceTree/insert', {
                        atomcode: this.atomcode,
                        haschildren: this.currentTree1.data.haschildren,
                        id: this.currentTree1.data.id,
                        lvl: this.currentTree1.data.lvl,
                        overTime: this.servicePubMsg1.time,
                        servcode: this.servicePubMsg1.code,
                        servname: this.servicePubMsg1.name,
                        servversion: this.servicePubMsg1.edition,
                        status: this.requestStaVal
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '发布成功!'
                            })
                            this.servicePubMsg1 = {}
                            // this.activeName = 'third'
                            // this.servicePubMsg = false
                            // this.tree = true
                            this.directoryFrom = false

                            this.$http.get('/EsbInboundMain/select', {
                                atomcode: this.atomcode
                            }).then(result => {
                                if (result.success) {
                                    this.tableData1 = result.data
                                }
                            })
                        }
                    })
                })
            },

            // 表格详情
            serDetails(row) {
                this.serviceid = row.serviceid
                this.detailsSys = true
                // console.log(this.serviceid)
                this.$http.get('/EsbInboundMain/select', {
                    serviceid: this.serviceid
                }).then(result => {
                    if (result.success) {
                        this.detailsSerVal = result.data.status
                        this.detailsSer = result.data
                    }
                })
            },

            // 修改表格详情
            updateDetailsSer() {
                this.validate('detailsSer', () => {
                    this.$http.get('/EsbInboundMain/update', {
                        serviceid: this.serviceid,
                        servname: this.detailsSer.servname,
                        servversion: this.detailsSer.servversion,
                        status: this.detailsSerVal,
                        overTime: this.detailsSer.overTime
                    }).then(result => {
                        if (result.success) {
                            this.detailsSys = false
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.$http.get('/EsbInboundMain/select', {
                                atomcode: this.atomcode
                            }).then(result => {
                                if (result.success) {
                                    this.tableData1 = result.data
                                }
                            })
                        }
                    })
                })
            },

            // 删除
            del() {
                this.$confirm('确定要删除该服务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/esbAtomServiceDetailed/deleteAtomServiceById', {
                        id: this.detailsId
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.deployment = false
                            this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                                id: this.currentTree ? this.currentTree.data.code : '' || this.id,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.page['records']
                                }
                            })
                        }

                    })
                })
            },

            // 修改部署信息
            saveMap() {
                this.$http.get('/EsbServiceAtomDeploy/select', {
                    deploytype: 1,
                    serviceid: this.detailsId
                }).then(result => {
                    if (result.success) {
                        for (let i = 0; i < this.mapList.length; i++) {
                            if (this.mapList[i].checked === true) {
                                this.mapList[i].status = '1'
                            } else {
                                this.mapList[i].status = '0'
                            }
                        }
                        result.data = this.mapList
                        this.$http.post('/EsbServiceAtomDeploy/update', {
                            deploytype: 1,
                            serviceid: this.detailsId,
                            data: this.mapList
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                this.$http.get('/EsbServiceAtomDeploy/select', {
                                    deploytype: 1,
                                    serviceid: this.detailsId
                                }).then(result => {
                                    if (result.success) {
                                        // result.data.deploySrc = '/static/images/use.png'
                                        for (let i = 0; i < result.data.length; i++) {
                                            if (result.data[i].status === '1') {
                                                result.data[i].checked = true
                                                // result.data[i].deploySrc = '/static/images/use.png'
                                            } else {
                                                result.data[i].checked = false
                                                // result.data[i].deploySrc = '/static/images/nouse.png'
                                            }
                                            if (result.data[i].appStatus === '1') {
                                                result.data[i].deploySrc = '/static/images/use.png'
                                            } else {
                                                result.data[i].deploySrc = '/static/images/nouse.png'

                                            }
                                        }
                                        this.mapList = result.data

                                    }
                                })
                            }

                        })
                    }
                })
            },

            adaptationUpD() {
                this.adaptationFlag = true
                this.adaptationForm = {...this.adaptation}
                if (this.adaptationForm.scharset === null) {
                    this.adaptationForm.scharset = 'UTF-8'
                }
                if (this.adaptationForm.rcharset === null) {
                    this.adaptationForm.rcharset = 'UTF-8'
                }

            },

            // 修改适配类型信息
            saveAdaptation() {
                if (this.adapterType === '2') {
                    this.validate('adaptationForm', () => {
                        this.$http.get('/esbAdapderHttp/updateEsbAdappderHttp', {
                            id: this.detailsId,
                            httptype: '',
                            rcharset: this.adaptationForm.rcharset,
                            scharset: this.adaptationForm.scharset,
                            serviceUrl: this.adaptationForm.serviceUrl
                        }).then(result => {
                            if (result.success) {
                                this.adaptationFlag = false
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.$http.get('/esbAdapderHttp/selectEsbAdappderHttp', {
                                    id: this.detailsId,
                                    adapterType: this.adapterType
                                }).then(result => {
                                    if (result.success) {
                                        if (result.data) {
                                            this.requestCategoryVal = result.data.httptype
                                            this.request = result.data.httptype
                                            this.adaptation = {...result.data}
                                        } else {
                                            this.requestCategoryVal = '1'
                                            this.request = ''
                                        }

                                    }
                                })
                            }
                        })
                    })
                } else {
                    this.validate('adaptationForm', () => {
                        this.$http.get('/esbAdapderHttp/updateEsbAdappderHttp', {
                            id: this.detailsId,
                            httptype: this.requestCategoryVal,
                            rcharset: this.adaptationForm.rcharset,
                            scharset: this.adaptationForm.scharset,
                            serviceUrl: this.adaptationForm.serviceUrl
                        }).then(result => {
                            if (result.success) {
                                this.adaptationFlag = false
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.$http.get('/esbAdapderHttp/selectEsbAdappderHttp', {
                                    id: this.detailsId,
                                    adapterType: this.adapterType
                                }).then(result => {
                                    if (result.success) {
                                        if (result.data) {
                                            this.requestCategoryVal = result.data.httptype
                                            this.request = result.data.httptype
                                            // this.adaptationForm = {...result.data}
                                            // this.adaptation = {...result.data}
                                            // console.log(result.data)
                                            // console.log(this.adaptationForm)
                                            this.adaptation = {...result.data}
                                        } else {
                                            this.requestCategoryVal = '1'
                                            this.request = ''
                                        }

                                    }
                                })
                            }
                        })
                    })
                }
                // this.requestCategoryVal = ''

            },

            // 分页
            getPage(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                    id: this.currentTree ? this.currentTree.data.code : '' || this.id,
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            // 修改
            updateAtomic() {
                this.update = true
                this.$http.get('/esbAtomServiceDetailed/detailMess', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.requestHeadeVal = result.data.contentType
                        this.updateForm = result.data
                        this.DetailsSerVal = result.data.status
                    }
                })
            },

            // 修改保存
            saveUpdate() {
                this.validate('updateForm', () => {
                    this.$http.get('/esbAtomServiceDetailed/saveOrUpdateAtomService', {
                        id: this.detailsId,
                        systemId: this.currentTree ? this.currentTree.data.code : '',
                        adapterType: this.requestVal,
                        atomserviceCode: this.updateForm.atomserviceCode,
                        atomserviceName: this.updateForm.atomserviceName,
                        atomserviceVersion: this.updateForm.atomserviceVersion,
                        contentType: this.requestHeadeVal,
                        maxClients: this.updateForm.maxClients,
                        overTime: this.updateForm.overTime,
                        status: this.requestStatusVal
                    }).then(result => {
                        if (result.success) {
                            this.update = false
                            // this.deployment = false
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                                id: this.currentTree ? this.currentTree.data.code : '' || this.id,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.page['records']
                                }
                            })
                            this.$http.get('/esbAtomServiceDetailed/detailMess', {
                                id: this.detailsId
                            }).then(result => {
                                if (result.success) {
                                    this.tableMsg = result.data
                                }
                            })
                        }
                    })
                })
            },

            // 新建系统
            addSystem() {
                this.validate('form', () => {
                    this.$http.get('/esbAtomServiceDetailed/saveOrUpdateAtomService', {
                        systemId: this.currentTree ? this.currentTree.data.code : '' || this.id,
                        adapterType: this.requestVal,
                        atomserviceCode: this.form.atomserviceCode,
                        atomserviceName: this.form.atomserviceName,
                        atomserviceVersion: this.form.atomserviceVersion,
                        contentType: this.requestHeadeVal,
                        maxClients: this.form.maxClients,
                        overTime: this.form.overTime,
                        status: this.requestStatusVal
                    }).then(result => {
                        if (result.success) {
                            this.visible1 = false
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            })
                            this.form.atomserviceCode = ''
                            this.form.atomserviceName = ''
                            this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                                id: this.currentTree ? this.currentTree.data.code : '' || this.id,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.page['records']
                                }
                            })
                        }
                    })
                })

            },

            checkChange(data) {
                // this.$refs.tree.setCurrentKey(data.id)
                this.currentTree = {
                    data
                }
                this.addIp = this.currentTree.data.id

                if (this.add !== this.currentTree.data.id) {
                    this.deployment = false
                    this.detailsSystem = false
                    // this.servicePubMsg = false
                }
                if (this.currentTree.data.haschildren === 1) {
                    this.detailsSystem = false
                    this.messageTable = false
                    this.deployment = false
                } else {
                    this.detailsSystem = false
                    this.messageTable = true
                }

                if (this.currentTree.data.haschildren === 0) {
                    this.$http.get('/esbAtomServiceDetailed/selectAtomService', {
                        id: this.currentTree ? this.currentTree.data.code : '' || this.id,
                        current: 1,
                        size: 10
                    }).then(result => {
                        if (result.success) {
                            this.tableData = result.data.records
                            this.page = result.data
                            delete this.page['records']
                        }
                    })

                    this.$http.get('/esbAtomServiceDetailed/detailSystemMess', {
                        id: this.currentTree ? this.currentTree.data.code : ''
                    }).then(result => {
                        this.atomicName = result.data.systemName
                        this.code = result.data.systemCode
                        this.detailsStatus = result.data.status
                        this.proSysForm = {...result.data}
                        this.proSysFormData = {...result.data}
                    })
                }
            },
            checkChange1(data, node, self, obj) {
                let _this = this
                setTimeout(() => {
                    _this.$method.updateView(false, false, _this, _this.$refs[obj])
                }, 500)
                this.dirCurrentTree = {
                    data,
                    node
                }
            },

            checkChange2(data) {
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree1 = {
                    data
                }
            },

            detailsSysDet() {
                this.detailsSysFlag = true
                this.proSysForm = {...this.proSysFormData}
            },

            updateDetailsSys() {
                this.validate('proSysForm', () => {
                    this.$http.get('/esbProviderTree/update', {
                        id: this.id || this.currentTree.data.code,
                        manageName: this.proSysForm.manageName,
                        pName: this.proSysForm.pname,
                        pPhone: this.proSysForm.pphone,
                        systemName: this.proSysForm.systemName
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.atomicName = this.proSysForm.systemName
                            this.loadNode(this.node_had, this.resolve_had)
                            this.proSysFormData = {...this.proSysForm}
                            this.detailsSysFlag = false
                            this.$http.get('/esbProviderTree/selectByName', {
                                id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.page['records']
                                }
                            })
                        }
                    })
                })
            },
            handleClick(row) {
                // console.log(row)
                this.tableMsg = []
                this.tableMsg = row
                this.deployment = true
                this.activeName = 'first'
                this.$nextTick(() => {
                    this.detailsId = row.id
                    this.atomcode = row.atomserviceCode
                    this.adapterType = row.adapterType
                    // this.serviceid = row.serviceid
                    this.name = row.atomserviceName
                })
                if (row.adapterType === '2') {
                    this.requestGenre = false
                } else {
                    this.requestGenre = true
                }
                // 单条信息
                this.$http.get('/esbAtomServiceDetailed/detailMess', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        this.requestHeadeVal = result.data.contentType
                        this.updateForm = result.data
                        this.DetailsSerVal = result.data.status
                    }
                })
                // // 部署信息
                // console.log(row.id)
                this.$http.get('/EsbServiceAtomDeploy/select', {
                    deploytype: 1,
                    serviceid: row.id
                }).then(result => {
                    if (result.success) {
                        for (let i = 0; i < result.data.length; i++) {
                            if (result.data[i].status === '1') {
                                result.data[i].checked = true
                                // result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/enable_server.png'
                            } else {
                                result.data[i].checked = false
                                // result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/desable_server.png'
                            }
                            if (result.data[i].appStatus === '1') {
                                result.data[i].deploySrc = '/static/images/use.png'
                            } else {
                                result.data[i].deploySrc = '/static/images/nouse.png'

                            }
                        }
                        this.mapList = result.data
                        // console.log(this.mapList)
                    }
                })
                // this.requestCategoryVal = ''

            },
            tabClick(tab) {
                // console.log(tab.paneName)
                if (tab.paneName === 'second') {
                    this.adaptationForm = {}
                    this.adaptation = {}
                    this.$http.get('/esbAdapderHttp/selectEsbAdappderHttp', {
                        id: this.detailsId,
                        adapterType: this.adapterType
                    }).then(result => {
                        if (result.success) {
                            if (result.data) {
                                // console.log(result.data)
                                this.requestCategoryVal = result.data.httptype
                                this.request = result.data.httptype
                                this.adaptationForm = {...result.data}
                                this.adaptation = {...result.data}
                            } else {
                                this.requestCategoryVal = '1'
                                this.request = ''
                            }

                        }
                    })
                } else if (tab.paneName === 'third') {
                    this.$http.get('/EsbInboundMain/select', {
                        atomcode: this.atomcode
                    }).then(result => {
                        if (result.success) {
                            this.tableData1 = result.data
                            // this.
                        }
                    })
                } else {
                    this.$http.get('/EsbServiceAtomDeploy/select', {
                        deploytype: 1,
                        serviceid: this.detailsId
                    }).then(result => {
                        if (result.success) {
                            for (let i = 0; i < result.data.length; i++) {
                                if (result.data[i].status === '1') {
                                    result.data[i].checked = true
                                    // result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/enable_server.png'
                                } else {
                                    result.data[i].checked = false
                                    // result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/desable_server.png'
                                }
                                if (result.data[i].appStatus === '1') {
                                    result.data[i].deploySrc = '/static/images/use.png'
                                } else {
                                    result.data[i].deploySrc = '/static/images/nouse.png'

                                }
                            }
                            this.mapList = result.data
                            // console.log(this.mapList)
                        }
                    })
                }
            },
            handLeaveClick(row) {
                // this.detailsId = ''
                // console.log(this.detailsId)
            },

            close() {
                // this.visible2 = false
                this.detailsSystem = false
                this.messageTable = false
                this.currentTree = false
            },
            closeUpdateDetailsSys() {
                this.detailsSysFlag = false
                this.$refs.proSysForm.resetFields()
            },
            // 关闭适配信息
            closeadaptation() {
                this.adaptationFlag = false
                this.$refs.adaptationForm.resetFields()
            },
            closeSys() {
                this.visible1 = false
                this.$refs.form.resetFields()
                this.form.name = ''
            },
            closeUpdateDetailsSer() {
                this.detailsSys = false
                this.$refs.detailsSer.resetFields()
            },
            // 点击详情取消
            closeDetails() {
                this.messageTable = true
                this.detailsSystem = false
                // this.$refs.proSysForm.resetFields()
            },
            // 关闭弹框
            atomicClose() {
                this.deployment = false
                this.activeName = 'first'
            },
            // 发布
            closePub() {
                // this.servicePubMsg = true
                this.directoryMigration = false
                // if (!this.servicePubMsg) {
                //     this.servicePubMsg = false
                // }
            },
            pubSave() {
                // this.directoryMigration = false
                this.servicePubMsg = true
                if (!this.servicePubMsg) {
                    this.servicePubMsg = true
                }
            },
            closeUpdate() {
                this.$refs.updateForm.resetFields()
                this.update = false

            },
            tabCurrentChangeModify(currentRowModify, oldCurrentRowModify) {
                this.currentRowModify = currentRowModify
            },
            tabCurrentChangeDetails(currentRowDetails, oldCurrentRowDetails) {
                this.currentRowDetails = currentRowDetails
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            scrollBar
        }
    }
</script>

<style scoped lang="less">
    .message {
        min-height: calc(100% - 1.1rem);
    }

    .serviceContent {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        width: 3.6rem;
    }

    .fromBox {
        height: 5rem;
        overflow-y: auto;

        .el-input {
            width: 90%;
        }
    }

    .span {
        font-size: .16rem;
    }

    .tab-content {
        margin-left: .2rem;
    }

    .breadcrumb1 {
        height: 0.15rem;
        margin: 0.2rem 0;
        padding-left: 0.1rem;
        border-left: 2px solid #5586FB;
    }

    .sysDet {
        margin-top: .4rem;
    }

    .relatedservices {
        width: 99%;
    }

    .operation {
        margin-right: .7rem;
    }

    .detailsMsg {
        padding: 0.2rem 0 .1rem 0;
        font-size: 0.12rem;

        span {
            width: 2rem;
            color: #999;
            display: inline-block;
            font-size: .14rem;
        }

        p {
            width: 95%;
            display: inline-block;
            line-height: .3rem;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    .tree1 {
        height: 2rem;
        overflow-y: auto;
    }

    .sysMsg {
        font-size: .16rem;
        min-height: .4rem;
        /*line-height: .4rem;*/
        border-bottom: .01rem solid #E1E1E1;
        margin-bottom: .3rem;
        margin-right: 1rem;

        .sysTitle {
            display: inline-block;
            /*float: left;*/
            color: #999;
            margin-right: .2rem;
            /*width: 1.4rem;*/
            vertical-align: top;
        }

        .sysTitle1 {
            /*display: inline-block;*/
            /*float: left;*/
            color: #999;
            margin-right: .2rem;
            /*width: 1.4rem;*/
            vertical-align: top;
        }

        .sysContenrt {
            /*float: left;*/
            width: 3rem;
            overflow-wrap: break-word;
            display: inline-block;
            vertical-align: text-top;
            /*display: inline-block;*/
        }

        .sysContenrt1 {
            /*float: left;*/
            /*width: 4rem;*/
            overflow-wrap: break-word;
            display: inline-block;
        }
    }

    .close {
        /*float: right;*/
        position: absolute;
        right: .15rem;
        font-size: .3rem;
        cursor: pointer;
        color: #999;
    }

    .sername {
        float: left;
        font-size: .14rem;
        color: #999;
    }

    .el-button--default {
        background-color: #fff;
        color: #999;
        border-color: #C9C9C9;
    }

    .box-head {
        padding: 0 .2rem;
        padding-top: 0.2rem;
        background-color: #F1F5FD;

        .sername {
            line-height: .4rem;
        }
    }

    .atomic-table .el-table th {
        background-color: #fff;
    }

    .atomic-table .el-table th.is-leaf, .el-table td {
        border-bottom: none;
    }

    .el-tabs__nav-scroll {
        background-color: #EAEEF7;
    }

    .file {
        color: #FFCA28;
    }

    .tree {
        padding: .2rem;
    }

    .sys {
        color: #5586FB;
    }

    .el-form-item__label {
        width: 130px;
    }

    .el-button--primary {
        background-color: #5586FB;
    }

    .el-button--danger {
        background-color: #F53535;
    }

    .el-table th.is-leaf {
        text-align: center;
    }

    .details {
        margin-left: .3rem;
    }

    .code {
        margin-left: .3rem;
    }

    .num {
        margin-left: .1rem;
        font-size: .16rem;
    }

    .tabBox {
        .mapOutMsg {
            font-size: .16rem;
            margin-top: .2rem;

            span {
                float: left;
                margin-left: .2rem;
                position: relative;
            }

            span::before {
                content: "";
                position: absolute;
                left: -0.1rem;
                top: .04rem;
                width: 0.02rem;
                height: 0.15rem;
                background-color: #5586FB;
            }

            .el-link {
                font-size: .16rem;
                margin-right: .3rem;
            }
        }

        p {
            font-size: 0.14rem;
            color: #333;
            /* margin-bottom: 0.1rem; */
            line-height: 0.3rem;
        }

        .el-button--info {
            color: #999;
            background-color: #f1f1f1;
            border-color: #f1f1f1;
        }

        .theme1 .el-button--primary:hover,
        .theme1 .el-button--primary:focus {
            background: #5586FB;
            border-color: #7db1f3;
            color: #fff;
        }

        .btn2 {
            background-color: #f1f1f1;
            border: none;
            margin-bottom: .3rem;
        }

        .tree2 {
            /*width: 2rem;*/
            height: 2rem;
            margin-top: .4rem;
            margin-left: 40%;
            overflow-y: auto;
        }

        .next {
            margin-top: .2rem;
            /*margin-left: .4rem;*/
            text-align: center
        }

        .btn1 {
            background-color: #5586FB;
            color: #fff;
        }

        .map-out-msg {
            width: 100%;

            li {
                display: inline-block;
                height: 2.5rem;
                width: 10%;
                margin-right: .3rem;
                margin-bottom: .3rem;
                margin-left: .5rem;
                text-align: center;

                .img {
                    width: 1rem;
                    height: 1.15rem;
                    /*background-color: pink;*/
                    margin-left: 35%;
                    margin-top: .5rem;

                    .el-image {
                        width: 100%;
                    }
                }

                .checked {
                    margin-left: 40%;
                    margin-top: .1rem;
                    float: left;
                    line-height: .4rem;
                }

                .checked-txt {
                    float: left;
                    margin-left: .2rem;
                    margin-top: .3rem;

                    p {
                        font-size: .12rem;
                        color: #999;
                    }
                }
            }

            .seve {
                text-align: center;
            }
        }

        .adaptation {
            margin-top: .2rem;

            span {
                margin-left: .2rem;
                position: relative;
            }

            span::before {
                content: "";
                position: absolute;
                left: -0.1rem;
                top: .02rem;
                width: 0.02rem;
                height: 0.15rem;
                background-color: #5586FB;
            }
        }

        .adaptation-msg {

            .el-form-item {
                margin-left: 20%;
                width: 50%;

                .btn-save {
                    margin-top: .3rem;
                }
            }

            .el-select {
                width: 100%;
            }
        }

        .related-services {
            /*display: none;*/
            margin-bottom: .2rem;
        }
    }

    .system-details {
        height: 100%;

        .el-form {
            width: 70%;
            margin-top: .5rem;

            .btn {
                margin-left: 30%;
            }
        }
    }

    .servicePub-msg {
        /*text-align: center;*/

        .el-form {
            width: 50%;
            margin-left: 25%;
        }

        .seve {
            text-align: center;
        }
    }

    .el-tag {
        height: 0.4rem;
        line-height: 0.4rem;
    }

    .tabBox {
        width: 100%;
        position: relative;
        margin-bottom: .1rem;

        > .white-block {
            padding: 0;
        }

        > * {
            height: 100%;
        }

        .heightTabs {
            height: 100%;
        }

        .tabsHeight {
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
</style>

